<template>
	<view class="con">
		<view class="flex-ju-b bgfff height100 color999 size29 posifi width1000 top0" :style="{paddingTop:shh+'px'}">
			<uni-icons @click="back" type="back" color="#333333" size="23"></uni-icons>
			<view class="flex-ju-a width400">
				<view @click="tabfocus(2)" :class="{txtactive:tindex==2}" class="flex-ju-c flex-col">
					关注
					<view :class="{active:tindex==2}" class="bline wh55-7 ra7 bgfff mt5"></view>
				</view>
				<view @click="tabfocus(3)" :class="{txtactive:tindex==3}" class="flex-ju-c flex-col">
					粉丝
					<view :class="{active:tindex==3}" class="bline wh55-7 ra7 bgfff mt5"></view>
				</view>
			</view>
			<uni-icons type="back" color="#fff" size="23"></uni-icons>
		</view>

		<view class="mt130 color333 size22">
			<!-- <view class="flex-a-i height70 ra70 bgEDEDED pl20 mb30">
				<image mode="widthFix" class="image width26" src="/static/img/sousou.png"></image>
				<input class="size26 pl10" placeholder="搜索已关注的人"/>
			</view> -->
			<view class="mb30">{{tindex==2?'我的关注':'我的粉丝'}}{{count}}人</view>
			<nodata v-if="isdata"></nodata>
			<view  v-for="(item,ib) in infolist" :key="ib"
				class="height150 flex-ju-b border-tEDEDED">
				<view @click="navto('others?uid='+item.uid)" class="flex-a-i">
					<image class="image wh76-76 ra76 mr10" :src="item.avatar?item.avatar:'/static/mo.png'"></image>
					<view>
						<view class="bold size29">{{item.nickname}}</view>
						<view class="color999 mt5">{{item.mark?item.mark:'未设置'}}</view>
					</view>
				</view>

				<view class="flex-a-i">
					<view v-if="item.other_care==1" class="flex-ju-c wh115-48 ra48 color999 border999">
						私信
					</view>
					<view @click="guanzhu(item)" v-if="item.other_care==2||item.other_care==4"
						class="flex-ju-c wh115-48 ra48 color27A752 border27A752">
						<uni-icons type="plusempty" color="#27A752" size="10"></uni-icons>
						关注
					</view>
					<view v-if="item.other_care==3" class="flex-ju-c wh115-48 ra48 color999 border999">
						<image class="image width20 mr5" mode="widthFix" src="/static/img/xiaogou.png"></image>
						已关注
					</view>
				</view>
				
			</view>
			 

		</view>
	</view>
	 
</template>

<script>
	export default {
		data() {
			return {
				isdata: false,
				tindex: 2,
				infolist: [],
				page: 1,
				uid: "",
				count: 0,
				sindex: "",
				other_id: ""
			}
		},
		onLoad(option) {
			if (option.uid) {
				this.other_id = option.uid
			}
			if (option.index == 2) {
				this.guanlist(2)
				this.tindex = 2
			} else if (option.index == 3) {
				this.guanlist(3)
				this.tindex = 3
			} else {
				this.guanlist(1)
			}
		},
		onReachBottom() {
			this.page++
			this.guanlist(this.tindex)
		},
		methods: {
			guanzhu(item){
				this.http('/api/add_care/'+item.uid,{},'post').then(res=>{
					if(item.other_care == 2){
						item.other_care = 1
					}else if(item.other_care == 4){
						item.other_care = 3
					}
				})
			},
			guanlist(type) {
				this.http('/api/care_list', {
					type,
					page: this.page,
					other_id: this.other_id
				}).then(res => {
					this.infolist = [...this.infolist, ...res.data.list]
					this.count = res.data.count
					if (this.infolist.length) {
						this.isdata = false
					} else {
						this.isdata = true
					}
				})
			},
			tabfocus(index) {
				this.page = 1
				this.infolist = []
				this.tindex = index
				this.guanlist(index)
			},
			tabfouce(uid, index) {
				this.uid = uid
				this.sindex = index
				this.$refs.upfocus.open()
			},
			centel() {
				this.$refs.upfocus.close()
				this.$refs.upcentelfocus.open()
			},
			ctanen() {
				this.http('/api/cancel_follow/' + this.uid, {}, 'delete').then(res => {

					this.infolist.splice(this.sindex, 1)
					this.$refs.upcentelfocus.close()
					if (this.infolist.length) {
						this.isdata = false
					} else {
						this.isdata = true
					}
					uni.showToast({
						title: res.msg,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style>
	.active {
		background: #27A752;
	}

	.txtactive {
		color: #333;
	}
</style>